<template>
	<view class="bounce-loader" :style="{
		backgroundColor:backgroundColor, bottom:bottom
	}">
		<view class="jump-box" :style="{
      transform: `translateY(${currentTranslate}px) scaleY(${currentScale})`,
      animationTimingFunction: cubicBezier
    }">
			<!-- 图片 -->
			<image :src="$IMG_URL('/static/newVersion/login3.png')" class="logo-image" :style="{ width, height }" />
			<!-- 动态阴影 -->
			<view class="shadow" :style="{
        transform: `scale(${shadowScale})`,
        opacity: shadowOpacity,
        backgroundColor: color + '33',
        filter: `blur(${shadowBlur}px)`
      }" />
		</view>
		<text v-if="showText" class="loading-text">{{ text }}</text>
	</view>
</template>
</template>

<script>
	export default {
		name: 'Loading',
		props: {
			backgroundColor: {
				type: String,
				default: '' // 主色调
			},
			logo: {
				type: String,
				default: '/static/coach/stock/logo.png'
			},
			width: {
				type: String,
				default: '100rpx'
			},
			height: {
				type: String,
				default: '80rpx'
			},
			color: {
				type: String,
				default: '#FF6B6B' // 主色调
			},
			speed: {
				type: Number,
				default: 800 // 动画周期（毫秒）
			},
			bounceHeight: {
				type: Number,
				default: 5 // 弹跳高度（像素）
			},
			showText: {
				type: Boolean,
				default: true
			},
			text: {
				type: String,
				default: '加载中...'
			},
			bottom: {
				type: String,
				default: '28%' // 支持 top/bottom 定位 
			}
		},
		data() {
			return {
				currentTranslate: 0,
				currentScale: 1,
				cubicBezier: 'cubic-bezier(0.4, 0, 0.2, 1)'
			}
		},
		computed: {
			shadowScale() {
				return 1 - (Math.abs(this.currentTranslate) / this.bounceHeight) * 0.2
			},
			shadowOpacity() {
				return 1 - (Math.abs(this.currentTranslate) / this.bounceHeight) * 0.4
			}
		},
		mounted() {
			this.startAnimation()
		},
		methods: {
			startAnimation() {
				const animate = () => {
					this.currentTranslate = -this.bounceHeight
					this.currentScale = 0.9

					setTimeout(() => {
						this.currentTranslate = 0
						this.currentScale = 1
					}, this.speed / 2)
				}

				this.animationTimer = setInterval(animate, this.speed)
			}
		},
		beforeDestroy() {
			clearInterval(this.animationTimer)
		}
	}
</script>

<style scoped>
	.shadow {
		position: absolute;
		bottom: -24rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
		height: 16rpx;
		border-radius: 50%;
		transition:
			transform calc(v-bind(speed) * 0.5 * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
			opacity calc(v-bind(speed) * 0.5 * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
			filter calc(v-bind(speed) * 0.5 * 1ms) ease;
	}

	.logo-image {
		position: relative;
		z-index: 1;
		border-radius: 16rpx;
	}

	.bounce-loader {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		z-index: 999;
		margin-top: 254rpx;
		/* position: fixed; */
		/* bottom: 28%; */
		left: 0;
		/* background-color: #fff; */
	}

	.jump-box {
		transition:
			transform calc(v-bind(speed)*0.5ms) cubic-bezier(0.4, 0, 0.2, 1),
			filter 0.3s ease;
	}

	.logo-image {
		border-radius: 16rpx;
		transition: transform 0.2s ease;
	}

	.loading-text {
		margin-top: 24rpx;
		color: v-bind(color);
		font-size: 28rpx;
		letter-spacing: 2rpx;
		animation: text-pulse 1.2s ease infinite;
	}

	@keyframes text-pulse {

		0%,
		100% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}
	}
</style>